﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>学员管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="../assets/css/font-awesome-4.7.0.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bootstrap-4.1.0.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/siteserver-1.0.7.min.css" rel="stylesheet" type="text/css" />
    <style>
        .nav .nav-link {
            font-weight: normal;
            border-radius: 1.25rem;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="main" class="m-t-15 m-b-15 m-l-15 m-r-15">
        <template v-if="pageLoad">
            <div class="card-box">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-inline">

                            <div class="form-group"> 关键字： </div>
                            <div class="form-group mr-3">
                                <input type="text" v-model="keyword" class="form-control form-control-sm" placeholder="输入姓名/手机/身份证号" />
                            </div>
                            <button @click="btnSearchClick()" class="btn btn-primary btn-sm">搜 索</button>

                        </div>
                    </div>
                </div>
                <hr />

                <table class="table table-sm tablesaw table-bordered table-hover bg-white mt-1">
                    <thead>
                        <tr>
                            <th class="text-center">序号</th>
                            <th class="text-center">姓名</th>
                            <th class="text-center">身份证号</th>
                            <th class="text-center">手机号码</th>
                            <th class="text-center">性别</th>
                            <th class="text-center">年龄</th>
                        </tr>
                    </thead>
                    <tbody id="contents">
                        <tr v-for="(item, index) in contents">
                            <td class="text-center">{{index+1}}</td>
                            <td class="text-center text-nowrap"><a href="javascript:;" v-on:click="btnDetailsClick(item.id)">{{item.displayName}}</a></td>
                            <td class="text-center text-nowrap">{{JSON.parse(item.settingsXml).citizenCode}}</td>
                            <td class="text-center text-nowrap">{{item.mobile}}</td>
                            <td class="text-center text-nowrap"><span class="badge badge-info">{{utils.IdCard(JSON.parse(item.settingsXml).citizenCode, 2)}}</span></td>
                            <td class="text-center text-nowrap">{{utils.IdCard(JSON.parse(item.settingsXml).citizenCode, 3)}}</td>
                        </tr>
                    </tbody>
                </table>

                <hr />

                <div class="row">
                    <div class="col-6">
                        <ul class="pagination pagination-sm float-left">
                            <li class="page-item" v:class="{disabled : page === 1}">
                                <a class="page-link" @click="loadFirstPage" v:class="{'bg-light' : page === 1}" href="javascript:;">首 页</a>
                            </li>
                            <li class="page-item" v:class="{disabled : page === 1}">
                                <a class="page-link" @click="loadPrevPage" v:class="{'bg-light' : page === 1}" href="javascript:;">上一页</a>
                            </li>
                            <li class="page-item" v:class="{disabled : page === pages}">
                                <a class="page-link" @click="loadNextPage" v:class="{'bg-light' : page === pages}" href="javascript:;">下一页</a>
                            </li>
                            <li class="page-item" v:class="{disabled : page === pages}">
                                <a class="page-link" @click="loadLastPage" v:class="{'bg-light' : page === pages}" href="javascript:;">末页</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-6 text-right">
                        <span>第{{pageIndex+1}}页</span>
                        <span> / </span>
                        <span>共{{pageCount}}页</span>
                        &nbsp;&nbsp;
                        <span>共{{recordCount}}条记录</span>
                    </div>
                </div>

            </div>
        </template>
        <template v-else>
            <div class="text-center" style="margin-top: 100px">
                <img class="mt-3" src="../assets/images/loading.gif" />
                <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
            </div>
        </template>
    </div>
</body>
</html>
<script src="../assets/lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../assets/lib/layer/layer-3.1.1.js" type="text/javascript"></script>
<script src="../assets/lib/vue-2.6.10.min.js" type="text/javascript"></script>
<script src="../assets/lib/axios-0.18.0.min.js"></script>
<script src="../assets/lib/shim.min.js" type="text/javascript"></script>
<script src="../assets/lib/xlsx.full.min.js" type="text/javascript"></script>
<script src="../assets/js/utils.js" type="text/javascript"></script>
<script src="students.js" type="text/javascript"></script>